import {defineComponent, reactive, ref} from "vue";
import style from "./css/index.module.css"
import {formatDateTime, getAssetsImages} from "@/utils/utils";
import {InformationStore} from "@/stores/information";
import {storeToRefs} from "pinia";
import Pagination from "@/components/Pagination";
import "../home/css/index.css"
import {useRouter} from "vue-router";
import SearchForm from "@/page/portal/information/comp/SearchForm";

export default defineComponent({
    setup(){
        const information_store = InformationStore()
        const  {informationList} = storeToRefs(information_store)
        const router = useRouter()

        const queryParams = ref({
            sort:undefined,
            info_title:undefined,
            pageNum:1
        })

        const total = ref(0)
        const list = ref([])
        const images = reactive({
            view:getAssetsImages("view.png"),
            zan:getAssetsImages("zan.png")
        })

        const initList = async () => {
            const res = await information_store.getInformationList(queryParams.value)
            total.value = res.total
        }
        const handleCurrentChange = (val) => {
            queryParams.value.pageNum = val
            initList()
        }

        const handleDetails = async (id) => {
            // 将该资讯的浏览量+1
            const code = await information_store.updateInformationRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'informationDetails', query: {id}})
            }
        }

        const handleQuery = () => {
            initList()
        }

        initList()


        return ()=>{
            list.value = informationList.value.map(item => {
                return <el-card shadow="always" style={{marginBottom:"20px"}}
                                onClick={()=>{
                                    handleDetails(item.id)
                                }}>
                    <div className={style.information_item}>
                        <div className={style.information_img}>
                            <el-image style={{width:'100%',height:'100%'}} src={item.info_img} fit={'cover'} />
                        </div>
                        <div className={style.text}>
                            <div className={style.tit}>{item.info_title}</div>
                            <div>
                                <div className={style.icons}>
                                    <div className={style.icon}>
                                        <img src={images.zan} alt=""/>
                                        <span>{item.record_info.love}</span>
                                    </div>
                                    <div className={style.icon}>
                                        <img src={images.view} alt=""/>
                                        <span>{item.record_info.view}</span>
                                    </div>
                                </div>
                                <div className={style.time}>{formatDateTime(item.createdAt)}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            })
            return <>
                <div className={style.container}>
                    <div className={style.information_box}>
                        <div className={style.title}>资讯</div>
                    </div>
                    <SearchForm
                        queryParams={queryParams}
                        handleQuery={handleQuery}
                    />
                    <div className={style.information_items}>
                        {list.value}
                    </div>

                    <Pagination
                        handleCurrentChange={handleCurrentChange}
                        total={total.value}
                    />
                </div>
            </>
        }
    }
})